{extend name="base"}
{block name="style"}
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=7U2BZ-WT3C6-3SFSH-EPX5Z-OW3YT-C6F7A"></script>
<script type="text/javascript" src="{:_static()}/components/qqMap.js"></script>

{/block}
{block name="main"}
<style type="text/css">
    .el-icon-minus,.el-icon-plus{line-height: inherit !important;}
</style>
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="10" >
            <el-button type="primary" size="small" @click="addDialog=true">添加功能</el-button>
        </el-col>
    </el-row>
    <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="ID" width="70" align="center" sortable></el-table-column>
        <el-table-column prop="key" label="键名" width="150" align="center"></el-table-column>
        <el-table-column prop="remark" label="功能说明"align="center"></el-table-column>
        <el-table-column prop="taskparams" label="属性列表">
            <template slot-scope="c">
                <el-tag type="success" v-for="v in c.row.taskparams" size="mini" class="m_r5">{{v.remark}}({{v.key}})</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="is_default" label="是否默认功能" align="center" width="70">
            <template slot-scope="c">
                <el-tag type="success" v-if="c.row.is_default">是</el-tag>
                <el-tag type="info" v-else>否</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="110">
            <template slot-scope="c">
                <el-tag type="success" v-if="c.row.status">启用</el-tag>
                <el-tag type="info" v-else>禁用</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

                <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                <el-button type="primary" size="mini" @click="showGDialog(scope.row)">分配属性</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page">{$list->render()|raw}</div>


    <!-- 添加、编辑素材 start -->
    <el-dialog :title="dialogTitle" width="500px" :visible.sync="addDialog">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="键名" prop="key">
                <el-input v-model="data.key" placeholder="属性键名（英文）"></el-input>
            </el-form-item>
            <el-form-item label="备注说明" prop="remark">
                <el-input type="textarea" v-model="data.remark" placeholder="功能说明"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="data.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">启用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="默认属性" prop="is_default">
                <el-radio-group v-model="data.is_default">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'funcAdd\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 添加、编辑素材 end -->

    <!-- 分配属性 start -->
    <el-dialog :title="funcTitle" width="70%" :visible.sync="showGrantDialog">
        <el-checkbox-group v-model="checkParams" @change="grantParams">
            <el-checkbox :label="item.id" v-for="item of params" class="p_y5">
                {{item.key}}({{item.remark}})
            </el-checkbox>
        </el-checkbox-group>
    </el-dialog>
    <!-- 分配属性 end -->

</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        dialogTitle:'添加功能',
        addDialog:false,
        data:{}, 
        rules:{
            key:{required:true,message:'键名不能为空'},
            remark:{required:true,message:'功能说明不能为空'}
        },

        //分配属性
        showGrantDialog:false,
        params:{$params->toJson()|raw},
        checkParams:[],
        defaultCheckParams:[],
        func_id:null,
        funcTitle:'分配属性'
        
    },
    created(){
        this.emptyData();
    },
    computed:{
        // 添加素材 提交数据
        submitData(){
            let options={};
            this.options.forEach(item=>{
                if(item.value>0&&item.name!=='media'){
                    options[item.name]=item.default;
                }
            })
            return Object.assign(this.data,{options},{images:this.fileList});
        },
    },
    methods:{
        emptyData(newData={}){
            this.data=Object.assign({
                key:'',
                remark:'',
                status:1,
                is_default:0,
            },this.clone(newData));
        },
        //编辑
        edit(row){
            this.emptyData(row);
            this.addDialog=true;
            this.dialogTitle='功能编辑';
        },
        // 显示分配属性框
        showGDialog(row){
            let id=row.id;
            this.funcTitle='分配属性('+row.remark+')';
            this.func_id=id;
            $.post("{:url('getParamsIds')}",{id},res=>{
                if(typeof res==='string'){
                    res=JSON.parse(res);
                }
                if(res.code){
                    this.defaultCheckParams=res.data;
                    this.checkParams=res.data;
                    this.showGrantDialog=true;
                }
            },'json')
        },
        // 分配属性
        grantParams(ids){
            let defaultCheckParams=this.defaultCheckParams;
            let diff=[];
            if(ids.length>defaultCheckParams.length){
                let defaults=new Set(defaultCheckParams)
                diff=ids.filter(x=>!defaults.has(x));
            }else{
                let ids_set=new Set(ids)
                diff=defaultCheckParams.filter(x=>!ids_set.has(x));
            }
            this._wspost("{:url('grantParams')}",{diff,func_id:this.func_id},res=>{
                if(res.code===0){ // 还原
                    this.checkMembers=defaultCheckParams;
                }else{
                    this.defaultCheckParams=ids;
                }
            },false);
        }
    },
});
</script>
{/block}